<template>
  <div class="circle-card">
    <img :src="picUrl" :style="imgStyle" />
    <p class="title">{{title}}</p>
  </div>
</template>

<script>
export default {
  name: 'circle-card',
  props: {
    picUrl: {
      type: String,
      default: ''
    },
    width: {
      type: Number,
      default: 20
    },
    title: {
      type: String,
      default: ''
    },
    info: {
      type: Object,
      default: () => { }
    }
  },
  data () {
    return {};
  },
  watch: {},
  computed: {
    imgStyle () {
      return {
        width: '100%',
        height: 'auto',
        borderRadius: '50%'
      };
    }
  },
  created () { },
  mounted () { },
  methods: {}
};
</script>
<style lang="scss" scoped>
.title {
  font-size: 10px;
  color: #414141;
  margin: 0;
  text-align: center;
}
</style>